<template>
    <el-row class="OLrow1"  type="flex" justify="center" style="margin-top: 10px;">
        <el-col :span="1" class="LeftLine"></el-col>
        <el-col :span="10" class="OLdiv1col1">
            <div class="OLcol1div1" style="text-align: left;">
                <img src="../../assets/icon/orderlisticon.png" class="lefticon">
                <span style="margin-left:10px">订单号：</span>
                <span class="ordernum" :style="OrderNumStyle"
                @mouseover="MOOrderNum()" @mouseleave="MLOrderNum()"
                >{{OrderNum}}</span>
                <div class="OLcoldiv2" :style="OrderDiv3Style"
                @mouseover="MOOrderdiv3()" @mouseleave="MLOrderdiv3()"
                title="hggood自营 | 笔记本"
                >hggood自营 | 笔记本</div>
            </div></el-col>
        <el-col :span="13">
            <div class="timeshowdiv">
                <span class="timeshowspan">
                    {{OrderTime}}
                </span>
            </div>
        </el-col>
    </el-row>
</template>

<script>
    export default {
        name:'XiaoOLProductTitle',
        props:{
            odata:[{'orderTime':'','OrderNum':'999'},{'orderTime':'','OrderNum':'999'}],
            testdata:[]
        },
        data(){
            return{
                OrderNumStyle:'',
                OrderDiv3Style:'',
                OrderTime:'',
                OrderNum:'',
            }
        },
        methods:{
            MOOrderNum(){
                this.OrderNumStyle='color: rgb(255, 96, 131);'
            },
            MLOrderNum(){
                this.OrderNumStyle=''
            },
            MOOrderdiv3(){
                this.OrderDiv3Style='color: rgb(255, 96, 131);'
            },
            MLOrderdiv3(){
                this.OrderDiv3Style=''
            }
        },
        mounted(){
            setTimeout(() => {
                this.OrderTime=this.odata[0].orderTime
                this.OrderNum=this.odata[0].onum
            }, 300);
        },
    }
</script>

<style scoped>
.OLrow1{
    margin: 0px auto;
    max-width: 1000px;
    background-color: rgb(248, 248, 248);
    text-align: center;
    font-size: 12px;
    margin-top: 10px;
    border-bottom: 1px solid rgb(221, 221, 221);
    height: 40px;
}
.OLdiv1col1{
    background-color: rgb(248, 248, 248);
}
.OLcol1div1{
    margin-top: 11px;
}
.LeftLine{
    background-color: rgb(228, 67, 102);
    width: 5px;
}
.lefticon{
    margin-left: 20px;
    margin-top: 0px;
    float: left;
    height: 18px;
    width: 18px;
}
.ordernum{
    cursor: pointer;
    margin-left: -3px;
}
.OLcoldiv2{
    color: rgb(104, 104, 104);
    margin-left: 250px;
    margin-top: -15px;
    position: absolute;
    width: 89px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.timeshowdiv{
    float: right;
    margin-top: 12px;
    color: rgb(146, 146, 146);
}
</style>